<template>
  <a-config-provider>
    <template #renderEmpty>
      <Empty>
        No Repayment
      </Empty>
    </template>
    <div class="loan-table-container">
      <div class="table-container">
        <a-table
          height="200"
          :columns="columns"
          :data-source="pagination.items"
          :loading="tableLoading"
          bordered
          size="middle"
          :scroll="{ x: 800 }"
          :pagination="paginationProps"
        >
          <template #create_time="text">
            <span>{{ text | dateFormat('DD/MM/YYYY') }}</span>
          </template>

          <template #task_status="text, row">
            <span>{{ text | grantStatusFilter }}</span>
          </template>

          <template #re_status="text, row">
            <span>{{ row | reStatusFilter }}</span>
          </template>

          <template #repayments="repayments, row">
            <span>{{ row | repayFilter }}</span>
          </template>

          <template #action="text, row">
            <div class="actions-container">
              <template v-if="!row.task_status || row.task_status === 1">
                /
              </template>
              <template
                v-else
              >
                <template v-if="row.task_status !== 4">
                  <!-- row.task_status | taskStatus-->
                  <span>/</span>
                </template>
                <template v-else>
                  <span
                    v-if="row.re_status === 1"
                    @click="handlerRepaymentDetails(row)"
                  >还款详情</span>
                  <span
                    v-if="row.task_status === 4 && row.re_status !== 1"
                    @click="handlerRepayment(row)"
                  >去还款</span>
                </template>
              </template>
            </div>
            <!-- <a >还款详情</a> -->
          </template>
        </a-table>
      </div>
    </div>
  </a-config-provider>
</template>

<script>
import { getLoans } from '@/api/flow/work';
import { Empty } from '@/components';
import table from '@/utils/mixins/table';

const customRenderMoney = (text) => (text ? `$ ${text}` : '/');

const columns = [
  {
    title: '申请日期',
    dataIndex: 'create_time',
    align: 'center',
    scopedSlots: { customRender: 'create_time' }
  },
  {
    title: '借款金额',
    dataIndex: 'borrow_money',
    align: 'center',
    customRender: customRenderMoney
  },
  // {
  //   title: '借款状态',
  //   dataIndex: 'task_status',
  //   align: 'center',
  //   scopedSlots: { customRender: 'task_status' }
  // },
  {
    title: '还款总额',
    dataIndex: 'amount',
    align: 'center',
    customRender: customRenderMoney
  },
  {
    title: '已还款期数',
    dataIndex: 'repayments',
    align: 'center',
    scopedSlots: { customRender: 'repayments' }
  },
  {
    title: '还款状态',
    dataIndex: 're_status',
    align: 'center',
    scopedSlots: { customRender: 're_status' }
  },
  {
    title: '操作',
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }
];

export default {

  filters: {
    taskStatus(value) {
      return (value === 1 || value === 3 || value === 5);
    },

    repayFilter(row) {
      if (!row.task_status) {
        return '/';
      }

      let count = 0;
      row.repayments.forEach((item) => {
        if (item.status === 1) {
          count += 1;
        }
      });

      return count;
    },

    grantStatusFilter(value) {
      switch (value) {
        case 1:
          return '审核拒绝';

        case 2:
          return '审核通过';

        case 3:
          return '审核中';

        case 4:
          return '拨款成功';

        case 5:
          return '拨款失败';

        default:
          return '/';
      }
    },

    reStatusFilter(row) {
      if (!row.task_status || row.task_status === 1) {
        return '/';
      }

      switch (row.re_status) {
        case 0:
          return '待还';

        case 1:
          return '已还';

        case 2:
          return '逾期';

        default:
          return '/';
      }
    }
  },

  components: {
    Empty
  },
  mixins: [table],

  data() {
    return {
      columns
    };
  },

  computed: {
    tableParams() {
      const { per_page, page } = this.pagination;
      return [per_page, page];
    }
  },

  created() {
    this.tableHooksRequest();
  },

  methods: {
    async tableHooksRequest() {
      try {
        const res = await this.getTableDatas(getLoans, this.tableParams);
        return res;
      } catch (error) {
        throw new Error(error);
      }
    },

    handlerRepayment({ task_id: tid }) {
      this.$router.push({
        name: 'RepaymentApplication',
        params: {
          tid
        }
      });
    },

    handlerRepaymentDetails({ task_id: tid }) {
      this.$router.push({
        name: 'RepaymentDetails',
        params: {
          tid
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.loan-table-container {
  .table-container {
    min-height: 330px;
    margin-top: $margin-sm;
    .actions-container {
      color: $theme-color;
      cursor: pointer;
    }
  }
}
</style>
